import Taro, { Component, Config } from "@tarojs/taro";
import { View, Input, Picker, Image, Text, Textarea, Form, Button } from "@tarojs/components";

import {IStoreProps} from '../../store/Stores'

import {inject, observer} from '@tarojs/mobx'

import PageFooterInfo from '../../components/PageFooterInfo'
import PickerArea from '../../components/PickerArea'
import './index.less'
import './page3_demand.less'

import right from '../../assets/img/right.png'
import {getRuntime,qualificationsTypeArr,enterpriseQualificationArr,taxTypesArr,projectPriceArr} from "../../utils/common";

// 工程服务中心-建企资质服务中心-发布信息
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page3 extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    title:'', // 标题 ,
    qualificationsTypeArr :qualificationsTypeArr, // 资质类别 (1 = ZR , 2 = QG , 3 = TG , 4 = QiuG ) = ['1', '2', '3', '4'],
    qualificationsType :'',
    qualificationsTypeIndex : null,
    priceIntervalArr:projectPriceArr, // 价格区间 ,
    priceInterval:'', // 价格区间 ,
    qualificationLevelArr:enterpriseQualificationArr, // 资质级别 ,
    qualificationLevel:'', // 资质级别 ,
    taxpayerTypeArr:taxTypesArr, // 纳税人类型 ,
    taxpayerType:'', // 纳税人类型 ,
    remarks:'', // 备注信息 ,
    contactsName:'', // 联系人姓名 ,
    contactsPhone:'', // 联系电话 ,
    contactsWechat:'', // 联系人微信号 ,
    contactsQQ:'', // 联系人QQ号 ,
    contactsArea:'', // 联系地址 ,
    areaCode: null, // 地区编号（省级） ,
    loading: false,
    disabled: false,
    submitText: '立即发布'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '发布信息'})
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changePicker(type: string, e) {
    console.log(type)
    console.log(e.detail.value)
    this.setState({
      [type]: this.state[type+'Arr'][e.detail.value]
    })
    if(type === 'qualificationsType'){
      this.setState({
        qualificationsTypeIndex: e.detail.value
      })
    }
  }

  onPicketArea(res) {
    this.setState({
      contactsArea: res.province.label,
      areaCode:res.province.value
    })
  }

  formSubmit(e) {
    let { qualificationsType,qualificationsTypeIndex,qualificationLevel,priceInterval,taxpayerType,areaCode,contactsArea } = this.state
    let {title, remarks, contactsName, contactsPhone, contactsWechat, contactsQQ} = e.detail.value
    let { FinancialCenterStore } =  this.props.stores
    if(!title){getRuntime().showToast('标题不能为空~'); return false}
    if(qualificationsTypeIndex==null){getRuntime().showToast('请选择资质类别~'); return false}
    if(!qualificationLevel){getRuntime().showToast('请选择资质级别~'); return false}
    if(!contactsPhone){getRuntime().showToast('联系人电话不能为空~'); return false}
    if(!areaCode){getRuntime().showToast('请选择联系地址~'); return false}
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    FinancialCenterStore.saveQualificationServiceCenter({
      form: {
        title,
        qualificationsType: qualificationsTypeIndex?qualificationsTypeIndex+1:null,
        priceInterval,
        qualificationLevel,
        taxpayerType,
        remarks,
        contactsName,
        contactsPhone,
        contactsWechat,
        contactsQQ,
        contactsArea,
        areaCode,
      },
      callback: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        })
        Taro.showModal({
          title:'数据提交成功',
          content:'返回列表查看~',
          showCancel: false
        }).then((res) => {
          if (res.confirm) {
            getRuntime().navigateBack()
          }
        })
      }
    })
  }

  render() {
    let { loading,disabled,submitText,qualificationLevel,qualificationLevelArr,priceInterval,priceIntervalArr,qualificationsType,qualificationsTypeArr,
    taxpayerType,taxpayerTypeArr} = this.state
    return(
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name'>标题</View>
             <Input className='from-input' name='title' placeholderClass='placeholder_class' placeholder='请填写标题(已建设工程相关)' />
           </View>
           <View className='input-group '>
             <View className='input-name'>资质类别</View>
             <Picker className='input-picker' name='qualificationsType' mode='selector' range={qualificationsTypeArr} onChange={this.changePicker.bind(this,'qualificationsType')}>
               <View className='tt'>
                 {!qualificationsType&& <View className='from-input picker-con placeholder-class' >点击选择</View>}
                 {qualificationsType&& <View className='from-input picker-con' >{qualificationsType}</View>}
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>价格区间(万)</View>
             <Picker className='input-picker' name='priceInterval' mode='selector' range={priceIntervalArr} onChange={this.changePicker.bind(this,'priceInterval')}>
               <View className='tt'>
                 {!priceInterval&& <View className='from-input picker-con placeholder-class' >点击选择</View>}
                 {priceInterval&& <View className='from-input picker-con' >{priceInterval}万</View>}
                 <Image className='drop-down-icon' src={right} />
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>资质级别</View>
             <Picker className='input-picker' name='qualificationLevel' mode='selector' range={qualificationLevelArr} onChange={this.changePicker.bind(this,'qualificationLevel')}>
               <View className='tt'>
                 {!qualificationLevel&& <View className='from-input picker-con placeholder-class' >点击选择</View>}
                 {qualificationLevel&& <View className='from-input picker-con' >{qualificationLevel}</View>}
                 <Image className='drop-down-icon' src={right}/>
               </View>
             </Picker>
           </View>
           <View className='input-group '>
             <View className='input-name'>纳税人类型</View>
             <Picker className='input-picker' name='taxpayerType' mode='selector' range={taxpayerTypeArr} onChange={this.changePicker.bind(this,'taxpayerType')}>
               <View className='tt'>
                 {!taxpayerType&& <View className='from-input picker-con placeholder-class' >点击选择</View>}
                 {taxpayerType&& <View className='from-input picker-con' >{taxpayerType}</View>}
                 <Image className='drop-down-icon' src={right}/>
               </View>
             </Picker>
           </View>
           <Textarea className='from-textarea height100' name='remarks' placeholderClass='placeholder-class'
                     placeholder='请填相关备注内容' maxlength={-1}/>
           <View className='input-group '>
           </View>
         </View>

         <View className='interval' />

         <View className='item-group pt0 pb0'>
           <View className='input-group'>
             <View className='input-name'>联系人</View>
             <Input className='from-input' name='contactsName' placeholderClass='placeholder_class' placeholder='请填写联系人' />
           </View>
           <View className='input-group'>
             <View className='input-name'>联系电话</View>
             <Input className='from-input' name='contactsPhone' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' />
           </View>
           <View className='input-group'>
             <View className='input-name'>微信号</View>
             <Input className='from-input' name='contactsWechat' placeholderClass='placeholder_class' placeholder='请填写微信号' />
           </View>
           <View className='input-group'>
             <View className='input-name'>QQ号</View>
             <Input className='from-input' name='contactsQQ' placeholderClass='placeholder_class' placeholder='请填写QQ号' />
           </View>
           <View className='input-group'>
             <View className='input-name'>联系地址</View>
             {/*<Input className='from-input' name='areaCode' placeholderClass='placeholder_class' placeholder='请填写联系地址' />*/}
             <PickerArea onPicketArea={this.onPicketArea.bind(this)} level={1} />
           </View>
         </View>

         <Button className='page-submit' formType='submit' disabled={disabled} loading={loading}>{submitText}</Button>
       </Form>

        <PageFooterInfo />
      </View>
    )
  }
}

export default Page3
